<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">车辆信息</span>
      </div>
      <el-row :gutter="24">
        <el-col>
          <el-table :loading="loading" :data="dataList" border>
            <el-table-column label="操作"  align="center" fixed="left" width="100">
              <template #default="{row , $index}">
                <el-button size="mini" type="text" v-if="isEdit"
                           @click="handleWork(row, $index)">编辑
                </el-button>
                <el-button size="mini" type="text" v-else
                           @click="handleView(row, $index)">查看
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="车架号" min-width="200" align="center" prop="vinNo"/>
            <el-table-column label="车牌号" min-width="120" align="center" prop="carNo"/>
            <el-table-column label="品牌/车系/车型" align="center" show-overflow-tooltip width="320">
              <template #default="{row}">
                {{ row.brandName }}{{ row.seriesName ? '/' + row.seriesName : '' }}{{
                  row.modelName ? '/' +
                      row.modelName : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="车辆归属" width="160" align="center" prop="ascription"/>
            <el-table-column label="订单编号" width="200" align="center" prop="orderCode"/>
            <el-table-column label="客户名称" width="160" align="center" show-overflow-tooltip prop="customerName"/>
            <el-table-column label="产品类型" width="130" align="center">
              <template #default="{row}">
                {{ selectDictLabel(dict.type.quota_rent_type, row.contractType) }}
              </template>
            </el-table-column>
            <el-table-column label="车辆性质" width="130" align="center">
              <template #default="{row}">
                {{ selectDictLabel(dict.type.car_nature, row.carNature) }}
              </template>
            </el-table-column>
            <el-table-column label="车辆状态" width="130" align="center">
              <template #default="{row}">
                {{ selectDictLabel(dict.type.car_business_type, row.businessType) }}
              </template>
            </el-table-column>
            <el-table-column label="车辆登记日期" min-width="140" align="center" prop="registerTime"/>
            <el-table-column label="座位数" width="120" align="center" prop="seatNum"/>
            <el-table-column label="燃油类型" width="120" align="center" prop="fuelType">
              <template #default="{row}">
                {{ selectDictLabel(dict.type.fuel_type, row.fuelType) }}
              </template>
            </el-table-column>
            <el-table-column label="上次年检线上/线下" align="center" width="140">
              <template #default="{row}">
                {{ selectDictLabel(dict.type.online_offline, row.lastOnlineOffline) }}
              </template>
            </el-table-column>
            <el-table-column label="上次年检到期日" min-width="160" align="center" prop="inspectionLastTime"/>

          </el-table>
        </el-col>

      </el-row>
    </el-card>

    <el-dialog title="年检信息" :visible.sync="dialogFormVisible" width="65%" top="5px">
      <div>
        <processing-annual v-model="dataFrom" :state="state" ref="refDetailForm"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleCancelOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import processingAnnual from "./processingAnnual.vue";

export default {

  name: 'annualBatch',//年检批量

  dicts: ['car_business_type', 'work_order_type', 'quota_rent_type','fuel_type',
    'car_nature', 'inspection_status', 'online_offline'],

  components: {
    processingAnnual,
  },

  model: {
    prop: 'dataTableList',
  },

  props: {
    dataTableList: {
      type: Array,
      default: []
    },
    state: {
      type: String,
      default: "",
    },
  },

  watch: {
    dataTableList: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.dataList = newVal
        }
      },
      immediate: true,
      deep: true
    }
  },

  computed: {
    handleCcomputed() {
      return function (objData, val) {
        let label = ''
        let index = objData.findIndex(a => a.value == val)
        if (index !== -1) {
          label = objData[index].label
        }
        return label
      }
    },
    get() {
      let that = this
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },

  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      index: 0,
      dataFrom: {
        inspectionTime: "",
        onlineOffline: "",
        inspectionNextTime: "",
        expireOnlineOffline: "",
        inspectionPrice: "",
        inspectionAgentPrice: "",
        comprehensivePrice: "",
        twoDimensionPrice: "",
        otherPrice: "",
        inspectionAllPrice: "",
        inspectionIdenUrl: "",
        inspectionInvoiceUrl: "",
        remark: "",
      },
      dataList: []
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    //编辑
    handleWork(row, index) {
      this.index = index
      this.dataFrom = {
        inspectionTime: "",
        onlineOffline: "",
        inspectionNextTime: "",
        expireOnlineOffline: "",
        inspectionPrice: "",
        inspectionAgentPrice: "",
        comprehensivePrice: "",
        twoDimensionPrice: "",
        otherPrice: "",
        inspectionAllPrice: "",
        inspectionIdenUrl: "",
        inspectionInvoiceUrl: "",
        remark: "",
        workOrderStatus: '2'
      }
      if (row.inspectionTime) {
        this.dataFrom = Object.assign(this.dataFrom, row)
      }
      this.dataFrom = this.dataList[this.index]
      this.dialogFormVisible = true

    },

    //查看
    handleView(row, index){
      this.index = index
      this.dataFrom = {
        inspectionTime: "",
        onlineOffline: "",
        inspectionNextTime: "",
        expireOnlineOffline: "",
        inspectionPrice: "",
        inspectionAgentPrice: "",
        comprehensivePrice: "",
        twoDimensionPrice: "",
        otherPrice: "",
        inspectionAllPrice: "",
        inspectionIdenUrl: "",
        inspectionInvoiceUrl: "",
        remark: "",
        workOrderStatus: '2'
      }
      if (row.inspectionTime) {
        this.dataFrom = Object.assign(this.dataFrom, row)
      }
      this.dataFrom = this.dataList[this.index]
      this.dialogFormVisible = true
    },

    //取消弹框
    handleCancel() {
      this.dataList[this.index] = this.dataFrom
      this.dialogFormVisible = false
    },

    //提交弹框
    handleCancelOk() {
      this.$refs.refDetailForm.handleProcessingAnnual().then(() => {
        this.$set(this.dataList,this.index,this.dataFrom)
        this.dialogFormVisible = false
      })
    }
  },
};
</script>

<style scoped lang="scss">
.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        color: #333333;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;

  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}
</style>


